<template class="a">
  <div>
    <div style="background-color: #FFFFFF" v-if="tree.titleShow">
      <el-button
        @click="treeTitleClick(tree.params)"
        size="medium"
        style="width: 100%;margin-left: -3px;"
        >{{ tree.title }}
      </el-button>
    </div>
    <template>
      <el-tree
        :data="tree.data"
        :default-checked-keys="tree.defaultCheckedKeys"
        :default-expanded-keys="tree.defaultExpandedKeys"
        :highlight-current="true"
        :indent="10"
        :node-key="tree.key"
        :props="tree.defaultProps"
        :show-checkbox="tree.showCheckbox"
        @node-click="handleNodeClick"
        ref="tree"
        v-loading="tree.loading"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data[tree.defaultProps.label] }}</span>
        </span>
      </el-tree>
    </template>
  </div>
</template>
<script>
import _ from "lodash";
import * as request from "@/axios/axios";

export default {
  name: "tree_index",
  data() {
    return {
      tree: {
        loading: true,
        showCheckbox: false,
        id: "",
        key: "id",
        url: "",
        defaultCheckedKeys: [],
        defaultExpandedKeys: [],
        params: {},
        // 数据
        data: [],
        defaultProps: {
          children: "",
          label: ""
        },
        //节点点击事件
        nodeClick: null,
        titleShow: true,
        title: "",
        titleClick: null
      }
    };
  },
  methods: {
    //节点单击事件
    handleNodeClick(data, n, o) {
      if (
        !n.expanded &&
        data[this.tree.defaultProps.children] &&
        data[this.tree.defaultProps.children].length > 0
      ) {
        let key = [];
        if (!_.isNil(this.$refs.tree.getCurrentKey())) {
          if (_.isArray(this.$refs.tree.getCurrentKey())) {
            key = this.$refs.tree.getCurrentKey();
          } else {
            key[0] = this.$refs.tree.getCurrentKey();
          }
        }
        if (data[this.key] === key[0]) {
          return;
        }
      }
      if (this.tree.nodeClick) {
        this.tree.nodeClick(data);
      }
    },
    initialize(tree) {
      this.tree = _.defaultsDeep(tree, this.tree);
      //获取数据
      this.refresh(this.tree.param);
    },
    //刷新数据
    refresh(params, openH = true) {
      let key = [];
      if (openH === true) {
        setTimeout(() => {
          if (!_.isNil(this.$refs.tree.getCurrentKey())) {
            if (_.isArray(this.$refs.tree.getCurrentKey())) {
              key = this.$refs.tree.getCurrentKey();
            } else {
              key[0] = this.$refs.tree.getCurrentKey();
            }
          }
        }, 0);
      }
      //判断地址是否为null
      if (!_.isEmpty(this.tree.url)) {
        this.tree.loading = true;
        //加载数据
        request.post(this.tree.url, params).then(response => {
          //嵌套过多手动更新数据
          this.$forceUpdate();
          this.tree.data = response.data;
          if (openH === true) {
            this.$refs.tree.setCurrentKey(key);
            this.tree.defaultExpandedKeys = key;
          }
          this.tree.loading = false;
        });
      }
    },
    treeTitleClick(params) {
      this.refresh(params, false);
      if (this.titleClick) {
        this.titleClick(params);
      }
      if (this.tree.titleClick) {
        this.tree.titleClick(params);
      }
      this.defaultCheckedKeys = [];
      // tree为Tree组件的ref值，isexpand为true或false
      this.$nextTick(() => {
        for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = false;
        }
      });
    },
    /**
     * 获取选中的节点数据node
     */
    getCheckedNodes() {
      return this.$refs.tree.getCheckedNodes();
    },
    /**
     * 获取选中的节点数据keys
     */
    getCheckedKeys() {
      return this.$refs.tree.getCheckedKeys();
    },
    /**
     *  通过node设置选中
     */
    setCheckedNodes(node) {
      /*[{
                  id: 5,
                  label: '二级 2-1'
                }, {
                  id: 9,
                  label: '三级 1-1-1'
                }]*/
      this.$refs.tree.setCheckedNodes(node);
    },
    /**
     * 通过key设置选中
     */
    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
    /**
     * 清空选中
     */
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    setExpandedKeys(keys) {
      //嵌套过多手动更新数据
      this.$forceUpdate();
      this.tree.defaultExpandedKeys = keys;
    }
  },
  props: {
    RHTree: {},
    titleClick: {
      type: Function,
      default: function() {}
    }
  },
  created() {
    const temp = this.RHTree || {};
    this.initialize(temp);
  }
};
</script>

<style scoped>
.a .el-tree .el-tree-node__content {
  height: 40px;
}
</style>
